<template>
	<view>
		<view class="content">
			<view class="title">{{qTitle}}</view>
			<view class="options" v-for="(item, i) in qOptions" :key="i">
				<view class="option-item">{{item.type}} {{item.value}}</view>
			</view>
		</view>
		<view class="show" v-if="prepare">
			<histogram-chart :dataAs="result" ref="chart" labelKey="label" valueKey="value" :yAxisAs="{
                formatter: {
                    type: 'Number'
                }
            }" />
		</view>
	</view>
</template>

<script>
	import HistogramChart from '@/components/stan-ucharts/HistogramChart.vue';
	import * as question from '@/api/questionnaire.js';
	export default {
		components: {
			HistogramChart,
		},
		data() {
			return {
				qid: '', //问卷id
				number: 0, //人的数量
				qTitle: 'Loading',
				qOptions: [{
					type: 'A',
					value: 'A'
				}, {
					type: 'B',
					value: 'B'
				}, {
					type: 'C',
					value: 'C'
				}],
				result: {},
				questions: [],
				prepare: false,
			}
		},
		methods: {
			getData() {
				uni.showLoading({
					title:"统计中..."
				})
				// 1. 选得到问题以及选项
				question.getQuestionnaireDetail({
					questionnaireId: this.qid
				}).then(res0 => {
					for (let item of res0.data.data[0].list) {
						let questionObj = {
							questionId: '',
							questionTitle: '',
							options: []
						}
						questionObj.questionId = item.questionnaireQuestion.questionnaireQuestionId
						questionObj.questionTitle = item.questionnaireQuestion.questionnaireSubjectContent
						for (let k of item.questionnaireOptions) {
							questionObj.options.push({
								optionContent: k.optionContent,
								optionType: k.optionType,
								count: 0
							})
						}
						this.questions.push(JSON.stringify(questionObj))
					}
					// 2. 得到数据：第一步人，第二步数据
					question.getQuestionAnswerList({
						questionnaireId: this.qid
					}).then(res1 => {
						this.number = res1.data.data.length
						for (let item of res1.data.data) {
							question.findVote({ //通过人的id得到数据
								userId: item.userId,
								// answer: 1,
								questionnaireId: this.qid,
							}).then(res2 => {
								let obj = JSON.parse(this.questions[0]) // 第0个问题
								for(let i in obj.options){
									for(let j in res2.data.data.list){
										if (obj.options[i].optionType == res2.data.data.list[j].questionnaireAnswer.answer) {
											obj.options[i].count++
										}
									}
								}
								this.questions[0] = JSON.stringify(obj)
								this.number--
								if (this.number == 0) { //统计完毕，第一个题目
									let obj = JSON.parse(this.questions[0])
									// this.qNumber = obj.questionId
									this.qTitle = obj.questionTitle
									this.qOptions = []
									this.result = {
										label: [],
										value: [{
											name: '人数',
											data: []
										}]
									}
									for (let i in obj.options) {
										this.qOptions.push({
											type: String.fromCharCode(64 + Number(obj.options[i].optionType)),
											value: obj.options[i].optionContent
										})
										this.result.label.push(obj.options[i].optionContent)
										this.result.value[0].data.push(obj.options[i].count)
									}
									uni.hideLoading()
									this.prepare = true
								}
							})
						}
					}).catch(err => {
						uni.hideLoading()
						console.log(err)
					})
				}).catch(err => {
					uni.hideLoading()
					console.log(err)
				})
			},
		},
		onLoad(option) {
			this.qid = option.qid
			this.getData()
		}
	}
</script>

<style>
	.iconfont {
		font-family: "iconfont" !important;
		/* font-size: 20px; */
		font-style: normal;
		-webkit-font-smoothing: antialiased;
		-moz-osx-font-smoothing: grayscale;
	}

	.content {
		text-align: center;
		font-family: 'Courier New', Courier, monospace;
		position: relative;
	}

	.content .title {
		margin: 10px;
	}

	.show {
		width: 90%;
		/* margin: 0 5%; */
	}
</style>
